<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>考试管理</title>
	<link rel="stylesheet" href="/css/elementui/index.css">
	<link rel="stylesheet" href="/css/exam/css/style.css">
	<link rel="stylesheet" href="/iconfont/iconfont.css">
	<script src="/css/exam/js/vue.js"></script>
	<script src="/css/elementui/index.js"></script>
	<script src="/css/exam/js/axios.min.js"></script>
</head>

<body>
    <!-- 编辑分类 -->
    <div id="app">
  <div  class="p-30">
		  <el-row>
					<span class="icon iconfont icon-arrow_back"></span> <a href="{{route('admin.examview.category')}}">返  回</a> | 编辑分类
		  </el-row><br>

            {{ csrf_field() }}
            <el-form :model="formData" :rules="rules" ref="formData" label-width="270px" class="demo-ruleForm">
                <!-- <el-form-item label="父&ensp;&ensp;级" clearable prop="c_fid">
                    <el-select v-model="formData.c_fid" multiple filterable allow-create default-first-option placeholder="请选择">
                        <el-option v-for="(item, index) in categories" :key="index" :label="item.c_name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="添&ensp;&ensp;加" prop="id" style="width: 450px;display:none">
                    <el-input v-model="formData.id"></el-input>
                </el-form-item> -->
                <el-form-item label="分类名" prop="c_name" style="width: 450px;">
                    <el-input v-model="formData.c_name"></el-input>
                </el-form-item>
                <el-form-item label="token" prop="_token" style="width: 450px;display:none">
                    <el-input v-model="formData._token"></el-input>
                </el-form-item>
                <el-form-item label="排&ensp;&ensp;序" prop="c_sort" placeholder="">
                    <div style="width: 180px;float:left;">
                        <el-input type="number" v-model="formData.c_sort"></el-input>
                    </div>
                    <i style="margin-left:10px;color:#606266;" class="el-icon-info">请输入整数。小数排在前面，大数排在后面。</i>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="formValidate('formData')" style="margin-right: 25px;">保&ensp;&ensp;存</el-button>
                    <!-- :loading="loading" -->
                    <el-button @click="goBack">取&ensp;&ensp;消</el-button>
                </el-form-item>

        </el-form>
    </div>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: function() {
            return {
                formData: {
                    id: '',
                    c_sort: '',
                    c_name: '',
                    _token: '{{csrf_token()}}'
                },
                rules: {
                    c_sort: [{
                        required: true,
                        message: '排序不能为空',
                        trigger: 'blur',
                    }, ],
                    c_name: [{
                        required: true,
                        message: '分类名不能为空',
                        trigger: 'blur',
                    }, ],
                    categories: [],
                    categoryData: {}
                }
            }
        },
        mounted() {

        },
        created() {
            this.getUrlKey(),
                this.classifyData()
            // this.$route.query.c_sort
            // this.$route.query.c_name
            // this.$route.query.id
            // console.log(this.$route.query.c_sort);
            // console.log(this.$route.query.c_name);
            // console.log(this.$route.query.id);
        },
        methods: {
            //获取当前浏览器地址url中的id
            getUrlKey() {
                var url = window.location.href; //获取当前url
                var dz_url = url.split('#')[0]; //获取#/之前的字符串
                var cs = dz_url.split('?')[1]; //获取?之后的参数字符串
                var cs_arr = cs.split('&'); //参数字符串分割为数组
                var cs = {};
                for (var i = 0; i < cs_arr.length; i++) { //遍历数组，拿到json对象
                    cs[cs_arr[i].split('=')[0]] = cs_arr[i].split('=')[1]
                }
                this.id = cs.id;
                console.log("this.id:" + this.id);
            },
            // 根据 id 查询
            // getClassify(id) {
            //     axios.post('/admin/exam/category_index', {})
            //         .then(res => {
            //             console.log('请求成功' + this.res)
            //             this.categories = res.data.data;
            //         });
            // },
            // 获取分类列表
            classifyData() {
                let id = this.id;
                axios.post('/admin/exam/category_index', {
                        id: id,
                    })
                    .then(res => {
                        console.log('请求成功：', res.data.data);
                        res.data.data.forEach(item => {
                            // return item.id == 81
                            if (item.id == id) {
                                console.log(item)
                                this.formData.c_sort = item.c_sort;
                                this.formData.c_name = item.c_name
                            }
                        })
                        this.categoryData = res.data.data;
                        this.count = res.data.count;
                    }).catch(error => {
                        console.log('请求失败：' + error);
                    })
            },

            //保存
            formValidate(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let id = this.id;
                        let c_name = this.formData.c_name;
                        let c_sort = this.formData.c_sort;
                        let _token = this.formData._token;
                        axios.post('/admin/exam/category_edit', {
                                id: id,
                                c_name: c_name,
                                c_sort: c_sort,
                                _token: _token,
                            })
                            .then(res => {
                                if (res.data.code == 0) {

                                    this.$message({
                                        type: 'success',
                                        message: '编辑成功！'
                                    });
                                    this.$refs[formName].resetFields();
                                } else {
                                    this.$message({
                                        type: 'info',
                                        message: '编辑失败！'
                                    })
                                }
                            })
                    } else {
                        return false;
                    }
                });
            },
            // formValidate(index, row) {
            //     let id = this.formData.id;
            //     let c_sort = this.formData.c_sort;
            //     let c_name = this.formData.c_name;
            //     axios.get('/admin/exam/category_edit?id=' + id + '&c_sort=' + c_sort + '&p_name=' + c_name)
            //         .then(res => {
            //             if (res.data.code == 0) {
            //                 this.$message({
            //                     type: 'success',
            //                     message: '保存成功！'
            //                 });
            //                 this.classifyData()
            //                 window.open("{{ route('admin.examview.category') }}", '_self')

            //             } else {
            //                 this.$message({
            //                     type: 'info',
            //                     message: '保存失败！'
            //                 })
            //             }
            //         })
            // },
            goBack() {
                window.history.go(-1)
                console.log('go back');
            },
        }
    })
</script>

</html>